
<!DOCTYPE html>
<html>
<head>
<!-- Standard Meta -->
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport"
	content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">

<link rel="image_src" type="image/jpeg" href="/images/logo.png" />

<!-- Site Properities -->
<meta name="generator" content="DocPad v6.79.4" />
<title>Tab | Semantic UI</title>

<meta name="description"
	content="A tab is a hidden section of content activated by a menu" />
<meta name="keywords"
	content="html5, ui, library, framework, javascript" />
<script src="../resources/static/libs/detect.min.js"></script>
<script src="../resources/static/libs/jquery.min.js"></script>
<script src="../resources/static/libs/clipboard-polyfill.js"></script>
<script src="../resources/static/libs/cookies.js"></script>
<script src="../resources/static/libs/jquery.easing.1.3.js"></script>
<script src="../resources/static/libs/highlight.js"></script>
<script src="../resources/static/libs/jquery.history.js"></script>
<script src="../resources/static/libs/tablesort.min.js"></script>
<script src="../resources/dist/semantic.js"></script>
<script src="../resources/js/docs.js"></script>
<script src="../resources//dist/components/tab.js"></script>
<link rel="stylesheet" type="text/css" class="ui"
	href="../resources/dist/semantic.css">
<link rel="stylesheet" type="text/css"
	href="../resources/static/style/docs.css">
<link rel="stylesheet" type="text/css"
	href="../resources/static/style/rtl.css">
<script type="text/javascript">
	window.liveSettings = {
		api_key : '9ede3015b9f84c1aabc81ab839c55d74',
		parse_attr : [ 'data-title', 'data-content' ],
		detectlang : false,
		autocollect : true,
		ignore_tags : [ 'i', 'code', 'pre' ],
		parse_attr : [ 'data-title', 'data-content', 'data-text' ],
		ignore_class : [ 'code', 'anchor' ]
	};
</script>
</head>
<body id="example" class="" ontouchstart="">
	<div class="pusher">
		<div class="full height">
			<div class="article">
				<script src="../resources/static/libs/sinon.js"></script>
				<div class="ui masthead vertical tab segment">
					<div class="ui container">
						<div class="introduction">
							<h1 class="ui header">
								Tab
								<div class="sub header">自己的签名</div>
							</h1>
							<div class="ui hidden divider"></div>
						</div>
						<div class="ui four item stackable tabs menu">
							<a class="active item" data-tab="basic">基础设置</a> <a class="item"
								data-tab="account">账户设置</a> <a class="item" data-tab="personal">隐私设置</a>
							<a class="item" data-tab="global">偏好设置</a>
						</div>
					</div>
				</div>
				<div class="main ui container">
					<!-- 基础设置 -->
					<div class="ui active tab" data-tab="basic">
						<h2 class="ui header">称呼</h2>
						<div class="example">
							<h4 class="ui header">昵称</h4>
							<p>喜欢的名字</p>
							<div class="ui top attached tabular menu">
								<div class="item">Tab</div>
							</div>
						</div>

						<h2 class="ui header">个人简介</h2>
						<div class="example">
							<h4 class="ui header">简介</h4>
							<p>请简洁地介绍一下自己</p>
							<!-- 内容框 -->
						</div>
					</div>
					<!-- 账户设置 -->
					<div class="ui tab" data-tab="account">
						<h2 class="ui dividing header">账户信息</h2>
						<div class="first example">
							<h4 class="ui header">帐号</h4>
							<p>
								请好好记住自己的
								<code>帐号</code>
								(帐号是唯一的,并且不可手动修改)
							</p>
							<div class="ui ignored warn message">
								当你的账户丢失或者忘记密码时,请先挂失,并向反馈我们
								<code>反馈我们</code>
								我们将会尽力处理
							</div>
							<!-- 帐号 -->
						</div>

						<div class="context example">
							<h4 class="ui header">密码</h4>
							<p>密码是非常重要的,请务必记住它.</p>
							<div class="ui ignored info message">
								
							</div>
							<!-- 密码 -->
						</div>

						<div class="paths example">
							<h4 class="ui header">绑定其它帐号(此功能还未开放)</h4>
						</div>
					</div>


					<div class="ui intro tab" data-tab="personal">

						<h2 class="ui dividing header">个人基本信息</h2>
						<div class="no example">
							<h4 class="ui header">性别</h4>
						</div>

						<div class="no example">
							<h4 class="ui header">生日</h4>
						</div>


						<div class="no example">
							<div class="ignored ui info message">
								<h4 class="ui header">地区</h4>
							</div>
						</div>


						<h2 class="ui dividing header">其它信息</h2>

						<div class="no example">
							<h4 class="ui header">手机号</h4>

							<p>
								Hash tags use in page links and
								<code>onhashstatechange</code>
								to create history events for each tab. This is sometimes easier
								to use than the more advanced push state, because it does not
								require you to route those URLs on your server. All in page
								links will route to the same url.
							</p>
						</div>

						<div class="no example">
							<h4 class="ui header">职业</h4>
						</div>

						<div class="no example">
							<h4 class="ui header">梦想</h4>
						</div>
						<h2 class="ui dividing header">修改密码问答</h2>

						<div class="no example">
							<h3 class="ui header">第一个问题</h3>
						</div>

						<div class="no example">
							<h4 class="ui header">第二个问题</h4>
						</div>
					</div>
					<div class="ui tab" data-tab="global">

						<h3 class="ui header">
							偏好设置
							<div class="sub header">设计一个适应自己的界面</div>
						</h3>
						<table class="ui celled sortable definition table segment">
							<thead>
								<tr>
									<th>Setting</th>
									<th class="four wide">状态</th>
									<th>描述</th>
								</tr>
							</thead>
							<tbody>
								<tr>
									<td>auto</td>
									<td>false</td>
									<td>Whether tab should load remote content as same url as
										history</td>
								</tr>
							</tbody>
						</table>

						<div class="ui horizontal divider">
							<i class="icon setting"></i>
						</div>

						<h3 class="ui header">
							主题设置
							<div class="sub header">选择一个自己选择的主题</div>
						</h3>

						<table class="ui celled sortable definition table segment">
							<thead>
								<tr>
									<th>设置</th>
									<th class="four wide">主题</th>
									<th>描述</th>
								</tr>
							</thead>
							<tbody>
								<tr>
									<td>name</td>
									<td>Tab</td>
									<td>Name used in debug logs</td>
								</tr>
								<tr>
									<td>没有你喜欢的主题?</td>
									<td colspan="2">
										<div class="code">那么请自己设计一个主题</div>
									</td>
								</tr>
							</tbody>
						</table>
					</div>

				</div>
			</div>
		</div>

	</div>

	<script>
		window.less = {
			async : true,
			environment : 'production',
			fileAsync : false,
			onReady : false,
			useFileCache : true
		};
	</script>
	<script src="../resources/static/libs/less.min.js"></script>
</body>
</html>
